
<template>
    <div class="num">
        <div class="content">
            <ScrollNumber v-for="(item, index) in numArr" :key="index" :item="item" :delay="index" class="nums">
            </ScrollNumber>
        </div>
    </div>
</template>
<script>
import ScrollNumber from "../components/ScrollNumber.vue"
export default {
    components: {
        ScrollNumber
    },
    data() {
        return {
            amount: 892345
        }
    },
    computed: {
        numArr() {
            const str = String(this.amount)
            let options = [];
            for (let i = 0; i < str.length; i++) {
                options.push(parseInt(str[i]))

            }
            return options;
        }
    },
    mounted() {
        setInterval(() => this.amount++, 10000);
    }

}
</script>
<style>
.content {
    display: flex;
}

.nums {
    width: 70px;
    margin-right: 8px;
    border-radius: 5px;
    background-color: #2aabff;
}
</style>